<template>
    <div>
        <h1 style="margin: auto; text-align: center;  height: 40px;width: 300px;color: red;">商品预览页</h1>
    <div  class="table-container" style="width: 90%;margin:auto;height: 100%; ">
     
      <table
        border="1"
        cellspacing="0"
        style="
          margin: auto;
          width: 90%;
          text-align: center;
          background-color: #e7e1e1;
        "
      >
        <thead>
          <tr>
            <th>型号</th>
            <th>图例</th>
            <th>出厂日期</th>
            <th>价格</th>
            <th>配置</th>
          </tr>
          <tr v-for="(item, index) in shopList" :key="index"  style="background-color: beige;">
            <td>{{ item.name }}</td>
            <td><img style="width: 100px; height: 50px;" :src="item.img" alt=""></td>
            <td>{{ item.date }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.desc }}</td>
          </tr>
        </thead>
      </table>
    </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        shopList: []
      }
    },
    mounted() {
     this.shopList=this.$store.state.arrccc
      // axios.get("https://7nvr3rh17g.hk.aircode.run/hxl").then((response) => {
      //   this.shopList = response.data.result.shop;
      //   for (let i = 0; i < this.shopList.length; i++) {
      //     axios.get(this.shopList[i].img, { responseType: 'arraybuffer' })
      //       .then(response => {
      //         const blob = new Blob([response.data], { type: response.headers['content-type'] });
      //         const url = URL.createObjectURL(blob);
      //         this.shopList[i].img = url;
      //       })
      //   }
      // });
    }
  }
  </script>
  
  <style>
    .table-container {
      max-height: 500px;
      overflow: auto;
    }
    .container {
      display: flex;
      height: 100%;
    }
    .sidebar {
      width: 20%;
      background-color: #f2f2f2;
      padding: 20px;
    }
    .sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .sidebar li {
      margin-bottom: 10px;
    }
    .sidebar li a {
      color: #333;
      text-decoration: none;
    }
    .sidebar li a:hover {
      color: #000;
    }
    .main-content {
      flex-grow: 1;
      padding: 20px;
    }
    .card {
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 20px;
      margin-bottom: 20px;
    }
    h1 {
      margin-top: 0;
    }
    td,
th {
  border-top: 1px solid #e7e1e1;
  border-bottom: 1px solid #000;
  border-left: 0;
  border-right: 0;
}
  </style>
  